<template>
  <button class="btn1" @click="openModal">打开模态框</button>
  <modal :isOpen="modalIsOpen" title="我是标题" @close-modal="onModalClose"> 我是传递的内容 </modal>
</template>

<script>
import { ref, defineComponent } from "vue";
import Modal from "../../../components/common/Modal/index.vue";

export default defineComponent({
  name: "App",
  components: {
    Modal,
  },
  setup() {
    //添加响应式对象控制是否显示
    const modalIsOpen = ref(false);
    //打开模态框事件
    const openModal = () => {
      modalIsOpen.value = true;
    };
    //关闭模态框事件
    const onModalClose = () => {
      modalIsOpen.value = false;
    };

    return {
      modalIsOpen,
      openModal,
      onModalClose,
    };
  },
});
</script>

<style>
h2{
    font-weight:500;
    font-size:24px;
    
}
.btn1 {
  background: #1971c9;
  border: none;
  padding: 16px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
</style>

